import React, { Component } from 'react'
import Header from '../../../common/header/textHeader';
import { CityWrap } from './style'
import { actionCreators } from './store';
import { connect } from 'react-redux';
import {fromJS} from 'immutable';
import Province from './components/province'
class City extends Component {
    render() {
        let { selectCity, cityList, setCity } = this.props;
        return (
            <CityWrap>
                <Header title={"选择城市"} />
                <Province setCity={(val) => { setCity(val, this) }}>
                    <div style={{ backgroundColor: "#fff" }}>
                        <div className="selectCity">
                            当前城市:{selectCity}
                        </div>
                        <div className="title">
                            热门城市:
                        </div>
                        <ul className="citylist" >
                            {cityList.map(i => {
                                return <li className="cityItem" key={i} onClick={() => setCity(i, this)}>{i}</li>
                            })}
                        </ul>
                    </div>
                </Province>
            </CityWrap>
        )
    }
}
const mapStateToProps = (state, ownProps) => {
    state= fromJS(state);
    return {
        selectCity: state.getIn(["city", "selectCity"]),
        cityList: state.getIn(["city", "cityList"]).toJS(),
    };
};
const mapDispatchToProps = (dispatch, ownProps) => {
    return {
        setCity(val, _this) {
            console.log(111, _this)
            if (val == null) {
                return;
            }
            dispatch(actionCreators.selectCity(val))
            _this.props.history.push('/shopHome')
        }
    };
};
export default connect(mapStateToProps, mapDispatchToProps)(City);
